<template>
  <div class="level-container">
    <h1>关卡 {{ levelId }}</h1>
    <p>{{ currentLevelInfo.welcomeText }}</p>
    <div id="blocklyDiv" style="height: 480px; width: 600px; border: 1px solid #ccc;"></div>
    <button @click="generateCode" class="generate-btn">生成代码</button>
    <button @click="submitCode" class="submit-btn">提交</button>
    <div v-if="generatedCode" class="code-output">
      <h2>生成的代码：</h2>
      <pre>{{ generatedCode }}</pre>
    </div>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script>
import axios from 'axios';
import * as Blockly from 'blockly';
import 'blockly/javascript';  // 确保导入 JavaScript 生成器模块
import 'blockly/blocks';      // 确保导入 blocks 模块
import { javascriptGenerator, JavascriptGenerator } from 'blockly/javascript';
// 引入中文语言包（可选）
import * as BlocklyZh from 'blockly/msg/zh-hans';
Blockly.setLocale(BlocklyZh);

export default {
  name: 'Level',
  data() {
    return {
      workspace: null,
      generatedCode: '',
      toolbox: '',
      levelInfo: {
        '1': {
          welcomeText: '欢迎来到关卡 1！这里是学习计算思维的起点，请按顺序激活能源节点。',
          validate: this.validateLevel1
        },
        '2': {
          welcomeText: '欢迎来到关卡 2！在本关卡中，你将学习如何使用条件分支来修复氧气系统。',
          validate: this.validateLevel2
        },
        '3': {
          welcomeText: '欢迎来到关卡 3！在本关卡中，你将学习如何使用条件分支来修复氧气系统。',
          validate: this.validateLevel2
        },
        '4': {
          welcomeText: '欢迎来到关卡 4！在本关卡中，你将学习如何使用条件分支来修复氧气系统。',
          validate: this.validateLevel2
        },
        '5': {
          welcomeText: '欢迎来到关卡 5！在本关卡中，你将学习如何使用条件分支来修复氧气系统。',
          validate: this.validateLevel2
        },
        '6': {
          welcomeText: '欢迎来到关卡 6！在本关卡中，你将学习如何使用条件分支来修复氧气系统。',
          validate: this.validateLevel2
        },
        '7': {
          welcomeText: '欢迎来到关卡 7！在本关卡中，你将学习如何使用条件分支来修复氧气系统。',
          validate: this.validateLevel2
        },
        '8': {
          welcomeText: '欢迎来到关卡 8！在本关卡中，你将学习如何使用条件分支来修复氧气系统。',
          validate: this.validateLevel2
        }
      }
    };
  },
  computed: {
    levelId() {
      return this.$route.params.id; // 从路由参数中获取关卡 ID
    },
    currentLevelInfo() {
      // 返回当前关卡的信息，如果关卡不存在则显示默认信息
      return this.levelInfo[this.levelId] || {
        welcomeText: '欢迎来到未知关卡！',
        validate: () => false
      };
    }
  },
  mounted() {
    this.setToolBoxAndBlocks();//根据ID设置工具箱和块
    // 初始化 Blockly 工作区
    this.workspace = Blockly.inject('blocklyDiv', {
      toolbox: this.toolbox,
    });
  },
  methods: {
    // 关卡 1 的验证逻辑：检查块的顺序是否正确
    validateLevel1() {
      const topBlocks = this.workspace.getTopBlocks();
      if (topBlocks.length !== 1) return false;
      const blockSequence = [];
      let currentBlock = topBlocks[0];
      while (currentBlock) {
        blockSequence.push(currentBlock.type);
        currentBlock = currentBlock.getNextBlock();
      }
      const correctSequence = ['open_valve', 'start_generator', 'calibrate_voltage'];
      return JSON.stringify(blockSequence) === JSON.stringify(correctSequence);
    },
    // 关卡 2 的验证逻辑：检查是否使用了条件分支块
    validateLevel2() {
      const ifBlocks = this.workspace.getAllBlocks().filter(block => block.type === 'controls_if');
      return ifBlocks.length > 0;
    },
    // 根据关卡 ID 调用对应的验证函数
    validateCode() {
      const validateFn = this.currentLevelInfo.validate;
      return validateFn ? validateFn.call(this) : false;
    },
    async submitCode() {
      if (this.validataCode()) {
        alert('恭喜你，关卡完成！');
        await this.updateProgress(); // 更新后端进度
        this.unlockNextLevel(); // 解锁下一关卡
        this.$router.push('/'); // 返回首页
      } else {
        alert('代码不正确，请再试一次。');
      }
    },
    async updateProgress() {
      const token = localStorage.getItem('token');
      if (!token) return;
      try {
        await axios.put('http://localhost:3000/progress', {
          progress: parseInt(this.levelId) + 1 // 更新为下一关卡
        }, {
          headers: { Authorization: token }
        });
        console.log('进度已更新');
      } catch (error) {
        console.error('更新进度失败:', error);
      }
    },
    unlockNextLevel() {
      // 这里仅在前端模拟解锁，实际应从后端获取最新进度
      this.$emit('unlock-next', parseInt(this.levelId) + 1);
    },
    setToolBoxAndBlocks() {
      if (this.levelId === '1') {
        this.toolbox = `
        <xml id="toolbox" style="display: none">
          <category name="操作" colour="230">
            <block type="open_valve"></block>
            <block type="start_generator"></block>
            <block type="calibrate_voltage"></block>
          </category>
        </xml>
        `;
        // 定义自定义块
        Blockly.Blocks['open_valve'] = {
          init: function () {
            this.appendDummyInput().appendField('开启阀门');
            this.setPreviousStatement(true, null); // 可以连接上一个块
            this.setNextStatement(true, null);    // 可以连接下一个块
            this.setColour(230);
            this.setTooltip('开启能源舱的阀门');
          }
        };

        Blockly.Blocks['start_generator'] = {
          init: function () {
            this.appendDummyInput().appendField('启动发电机');
            this.setPreviousStatement(true, null);
            this.setNextStatement(true, null);
            this.setColour(230);
            this.setTooltip('启动能源舱的发电机');
          }
        };

        Blockly.Blocks['calibrate_voltage'] = {
          init: function () {
            this.appendDummyInput().appendField('校准电压');
            this.setPreviousStatement(true, null);
            this.setNextStatement(true, null);
            this.setColour(230);
            this.setTooltip('校准能源舱的电压');
          }
        };

        // 定义每个自定义块的代码生成器
        javascriptGenerator.forBlock['open_valve'] = function (block, javascriptGenerator) {
          return 'openValue();\n';
        };

        javascriptGenerator.forBlock['start_generator'] = function (block, javascriptGenerator) {
          return 'startGenerator();\n';
        };

        javascriptGenerator.forBlock['calibrate_voltage'] = function (block, javascriptGenerator) {
          return 'calibrateVoltage();\n';
        };
      } else if (this.levelId === '2') {
        //
      }
    },
    generateCode() {
      this.generatedCode = javascriptGenerator.workspaceToCode(this.workspace);
    }
  },
};
</script>
